<template>
  <Layout>
    <div class="grid grid-cols-3 gap-4 p-4 display-chart-page">
      <div class="grid col-span-2 gap-2">
        <DisplayDateCard />
      </div>
      <div class="flex flex-col justify-between">
        <DisplayDataCard />
        <DisplayNowCard />
      </div>
    </div>
    <DisplayAmountCard />
  </Layout>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import Layout from "@/layout/index.vue";
import DisplayDateCard from "@/components/cards/DisplayDateCard.vue";
import DisplayAmountCard from "@/components/cards/DisplayAmountCard.vue";
import DisplayDataCard from "@/components/cards/DisplayDataCard.vue";
import DisplayNowCard from "@/components/cards/DisplayNowCard.vue";
export default defineComponent({
  name: "DisplayChart",
  components: {
    Layout,
    DisplayDateCard,
    DisplayAmountCard,
    DisplayDataCard,
    DisplayNowCard,
  },
  setup() {
    return {};
  },
});
</script>

<style scoped lang="scss"></style>
